<template>
	<view class="friend">
		<u-navbar title="我的账单" :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32"
		 :border-bottom="false"></u-navbar>
		<view class="bg">
			<image src="../../static/images/bg7@2x.png"></image>
		</view>
		<view class="fix-top">
			<view class="fix-navs u-flex u-col-center">
				<view class="" style="width: 100%;height: 80rpx;">
					<!-- <u-tabs :list="list" bar-width="94" bar-height="4" active-color="#F5B340" :bold="false" font-size="28" :current="current" @change="change"></u-tabs> -->
					<u-tabs :list="list" :is-scroll="false" bar-width="94" bar-height="4" active-color="#F5B340" :bold="false"
					 font-size="32" :current="current" @change="change"></u-tabs>
				</view>
			</view>
		</view>
		<view class="content-scroll">
			<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="onreachBottom" scroll-anchoring>
				<view class="item u-flex u-flex-col u-row-center" v-for="(item,index) in billList" :key="item.i_id">
					<view class="u-flex u-col-center u-row-between u-margin-bottom-12" style="width: 100%;">
						<view class="font-36">{{item.i_type == 1?"收入":"支出"}}</view>
						<view class="u-font-36" :class="[item.i_type==1?'color-76CF6D':'color-F34D40']">{{item.i_num}}{{item.i_integral_type ==1?"欢嘻豆":item.i_integral_type ==2?"积分":item.i_integral_type ==3?"元宝":item.i_integral_type ==4?"余额":""}}</view>

					</view>
					<view class="u-flex u-col-center u-row-between" style="width: 100%;">
						<view class="u-font-28 color-999999">{{item.i_describe}}</view>
						<view class="u-font-20 color-999999">{{item.i_created_at}}</view>
					</view>
				</view>
				<u-loadmore :status="status" @loadmore="onreachBottom" />
			</scroll-view>
		</view>
		<view class="redirect-home">
			<redirect-home></redirect-home>
		</view>
	</view>
</template>

<script>
	let meta = {
		current_page: 0,
		per_page: 15
	}
	import RedirectHome from '@/components/redirectHome/redirectHome.vue';
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '欢嘻豆'
				}, {
					name: '积分'
				}, {
					name: '元宝'
				}, {
					name: '余额'
				}],
				current: 0,
				billList: [],
				status: "loadmore",
				background: {
					// background: 'url(../../static/images/bg7@2x.png) no-repeat',
					// backgroundSize: 'cover',
				}
			};
		},
		onReady() {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			this.getBill()
		},
		methods: {
			change(index) {
				this.current = index;
				meta.current_page = 0;
				this.billList = [];
				this.status = 'loadmore'
				uni.showLoading({
					title: "加载中...",
					mask: true
				})
				this.getBill();
			},
			onreachBottom() {
				console.log(1);
				if (meta.total_pages === meta.current_page) {
					this.status = 'nomore'
					return false
				}
				this.status = 'loading';
				this.getBill();
			},
			getBill() {
				let params = {
					type: this.current,
					page: meta.current_page+1,
					page_size:meta.per_page
				}
				this.$u.api.getBill(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.billList = [...this.billList, ...res.result.data]
						meta = res.result.meta
					} else {
						this.status = 'nomore';
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onUnload() {
			meta.current_page = 0
		},
		components: {
			RedirectHome
		}
	};
</script>

<style>
	.friend {
		background: rgb(241, 245, 246);
		height: 100vh;
	}

	.bg {
		position: fixed;
		top: -44px;
		z-index: 1;
		width: 100%;
		height: 324rpx;
	}

	.bg image {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.fix-top {
		width: 100%;
		position: fixed;
		top: 171rpx;
		z-index: 3;
	}

	.fix-navs {
		width: 700rpx;
		height: 140rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.content-scroll {
		width: 700rpx;
		height: 75vh;
		margin: 0 auto;
		position: relative;
		top: 182rpx;
	}

	.item {
		width: 100%;
		height: 140rpx;
		background: rgba(255, 255, 255, 1);
		border: 3rpx solid rgba(247, 138, 65, 1);
		border-radius: 20rpx;
		padding: 0 22rpx 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.redirect-home {
		position: fixed;
		right: 0;
		bottom: 32rpx;
	}
</style>
